<template>
  <div class="content white-content padding-content content-height">
    <el-row :gutter="20">
      <el-col :span="24">
        <el-button plain>Plain</el-button>
        <el-button type="primary" plain>Primary</el-button>
        <el-button type="success" plain>Success</el-button>
        <el-button type="info" plain>Info</el-button>
        <el-button type="warning" plain>Warning</el-button>
        <el-button type="danger" plain>Danger</el-button>
      </el-col>
    </el-row>
    <el-row :gutter="20" style="margin-top:20px">
      <el-col :span="24">
        <el-button plain type="primary" @click="clickDialog" v-prevent-reclick>打开对话框</el-button>
        <el-button plain type="primary" @click="clickDialog" v-prevent-reclick>打开对话框</el-button>
        <el-button plain type="primary" @click="clickDialogCustom" v-prevent-reclick>自定义对话框按钮</el-button>
        <el-button plain type="primary" @click="openTabPage"
          v-prevent-reclick>打开TAB页(注意:是以TAB标题和组件名称为唯一键来区分的tab页面)</el-button>
      </el-col>
    </el-row>
    <el-row :gutter="20" style="margin-top:20px">
      <el-col :span="24">
        <el-button plain type="warning" @click="clickMessage" v-prevent-reclick>是否确认提示框？</el-button>
        <el-button plain type="primary" @click="clickMessageSuccess" v-prevent-reclick>成功提示</el-button>
        <el-button plain type="danger" @click="clickMessageFail" v-prevent-reclick>失败提示</el-button>
        <el-button plain type="info" @click="clickMessagePrompt" v-prevent-reclick>提交单项页</el-button>
        <el-button plain type="primary" @click="clickRequest" v-prevent-reclick>发起请求</el-button>
      </el-col>
    </el-row>
    <el-row :gutter="20" style="margin-top:20px">
      <el-col :span="24">
        <el-button plain type="primary" @click="preventReclick" v-prevent-reclick>节流(自定义指令、默认2秒)</el-button>
        <el-button plain type="primary" @click="preventReclick" v-prevent-reclick="5000">节流(修改时间单位:毫秒)</el-button>
      </el-col>
    </el-row>
    <el-row :gutter="20" style="margin-top:20px">
      <el-col :span="6">
        字典下拉选项<br />
        <el-select v-model="FormData.dictValue" placeholder="选项获取字典">
          <el-option v-for="item in dicts.ACCT_OWNER.list" :key="item.itemValue" :label="item.itemName"
            :value="item.itemValue" />
        </el-select>
      </el-col>
      <el-col :span="6">
        选择单个日期<br />
        <date-picker type="date" :disabledDate="disabledDate" v-model="FormData.date"></date-picker>
      </el-col>
      <el-col :span="6">
        选择日期范围<br />
        <date-picker v-model="FormData.dates"></date-picker>
      </el-col>
    </el-row>
    <el-row :gutter="20" style="margin-top:20px">
      <el-col :span="6">
        选择单月<br />
        <date-picker type="month" v-model="FormData.month"></date-picker>
      </el-col>
      <el-col :span="6">
        选择月范围<br />
        <date-picker type="months" v-model="FormData.months"></date-picker>
      </el-col>
      <el-col :span="6">
        选择单年<br />
        <date-picker type="year" v-model="FormData.year"></date-picker>
      </el-col>
      <el-col :span="6">
        选择年范围<br />
        <date-picker type="years" v-model="FormData.years"></date-picker>
      </el-col>
    </el-row>
    <el-row :gutter="20" style="margin-top:20px">
      <el-col :span="6">
        上传文件<br />
        <upload-file :value="FormData.file1" @change="changeFile($event, 'file1')"></upload-file>
      </el-col>
      <el-col :span="6">
        上传文件(只能上传pdf)<br />
        <upload-file :isPDF="true" :value="FormData.file2" @change="changeFile($event, 'file2')"></upload-file>
      </el-col>
      <el-col :span="6">
        上传文件(只能上传pdf和图片)<br />
        <upload-file :isPDFandPIC="true" :value="FormData.file3" @change="changeFile($event, 'file3')"></upload-file>
      </el-col>
      <el-col :span="6">
        上传影像图片<br />
        <upload-image :value="FormData.image" @change="changeImage($event, 'image')"></upload-image>
      </el-col>
    </el-row>
    <el-row :gutter="20" style="margin-top:20px">
      <el-col :span="6">
        上传文件(input样式)<br />
        <upload-file-input title="文件上传" :value="FormData.file1" @change="changeFile($event, 'file1')"></upload-file-input>
      </el-col>
      <el-col :span="6">
        上传文件(input样式)-只能上传pdf<br />
        <upload-file-input title="文件上传(只能上传pdf)" :isPDF="true" :value="FormData.file2"
          @change="changeFile($event, 'file2')"></upload-file-input>
      </el-col>
      <el-col :span="6">
        上传文件(input样式)-只能上传pdf和图片<br />
        <upload-file-input title="文件上传(只能上传pdf和图片)" :isPDFandPIC="true" :value="FormData.file3"
          @change="changeFile($event, 'file3')"></upload-file-input>
      </el-col>
      <el-col :span="6">
        上传影像图片(input样式)<br />
        <upload-image-input title="上传影像图片" :value="FormData.image1"
          @change="changeImage($event, 'image1')"></upload-image-input>
      </el-col>
    </el-row>
    <el-row :gutter="20" style="margin-top:20px">
      <el-col :span="6">
        单选<br />
        <radio-unit v-model="FormData.isUnit" :list="dicts.ACCT_OWNER.list"
          :options="{ label: 'itemName', value: 'itemValue' }"></radio-unit>
      </el-col>
      <el-col :span="6">
        选择机构<br />
        <select-dept v-model="FormData.deptId"></select-dept>
      </el-col>
    </el-row>
    <el-row :gutter="20" style="margin-top:20px">
      <el-col :span="24">
        分页(默认，所有操作都有, 默认对其方式右对齐){{ dataList.currentPage }}/{{ dataList.total }}<br />
        <pagination :align="'left'" :currentPage="dataList.currentPage" :total="dataList.total"
          @handleSizeChange="handleSizeChange" @handleCurrentChange="handleCurrentChange" @prevClick="prevClick"
          @nextClick="nextClick"></pagination>
      </el-col>
    </el-row>
    <el-row :gutter="20" style="margin-top:20px">
      <el-col :span="12">
        一级tab标签页<br />
        <el-tabs v-model="activeName" class="first_custom_tab" @tab-click="handleClick">
          <el-tab-pane label="标签页1" name="first">标签页1内容</el-tab-pane>
          <el-tab-pane label="标签页2" name="second">标签页2内容</el-tab-pane>
          <el-tab-pane label="标签页3" name="third">标签页3内容</el-tab-pane>
          <el-tab-pane label="标签页4" name="fourth">标签页4内容</el-tab-pane>
        </el-tabs>
      </el-col>
      <el-col :span="12">
        二级tab标签页<br />
        <el-tabs v-model="activeName" class="second_custom_tab" @tab-click="handleClick">
          <el-tab-pane label="标签页1" name="first">标签页1内容</el-tab-pane>
          <el-tab-pane label="标签页2" name="second">标签页2内容</el-tab-pane>
          <el-tab-pane label="标签页3" name="third">标签页3内容</el-tab-pane>
          <el-tab-pane label="标签页4" name="fourth">标签页4内容</el-tab-pane>
        </el-tabs>
      </el-col>
    </el-row>
    <el-row :gutter="20" style="margin-top:20px">
      <el-col :span="12">
        局中步骤条<br />
        <el-steps :active="stepActive" align-center class="custom_steps">
          <el-step title="已完成" />
          <el-step title="已完成" />
          <el-step title="进行中" />
          <el-step title="未开始" />
        </el-steps>
      </el-col>
      <el-col :span="12">
        局中步骤条-有描述<br />
        <el-steps :active="stepActive" align-center class="custom_steps">
          <el-step title="已完成" description="我是描述文字我是描述文字我是描述文字" />
          <el-step title="已完成" description="我是描述文字我是描述文字我是描述文字" />
          <el-step title="进行中" description="我是描述文字我是描述文字我是描述文字" />
          <el-step title="未开始" description="我是描述文字我是描述文字我是描述文字" />
        </el-steps>
      </el-col>
    </el-row>
    <el-row :gutter="20" style="margin-top:20px">
      <el-col :span="12">
        竖式步骤条<br />
        <el-steps :active="stepActive" class="custom_steps" direction="vertical">
          <el-step title="已完成" />
          <el-step title="已完成" />
          <el-step title="进行中" />
          <el-step title="未开始" />
        </el-steps>
      </el-col>
      <el-col :span="12">
        竖式步骤条-有描述<br />
        <el-steps :active="stepActive" class="custom_steps" direction="vertical">
          <el-step title="已完成" description="我是描述文字我是描述文字我是描述文字" />
          <el-step title="已完成" description="我是描述文字我是描述文字我是描述文字" />
          <el-step title="进行中" description="我是描述文字我是描述文字我是描述文字" />
          <el-step title="未开始" description="我是描述文字我是描述文字我是描述文字" />
        </el-steps>
      </el-col>
    </el-row>
  </div>
</template>
<script lang="ts" setup>
import { ref, onBeforeMount, onMounted, onUnmounted, onErrorCaptured, onBeforeUnmount, onBeforeUpdate, onUpdated, inject, defineAsyncComponent, reactive } from 'vue'
import type { TabsPaneContext } from 'element-plus'
const $pageFiles: any = inject('$pageFiles')
const $common: any = inject('$common')
const $utils: any = inject('$utils')
const $DialogBox: any = inject('$DialogBox')
const $MessageBox: any = inject('$MessageBox')
const $request: any = inject('$request')
const dialogDemo = defineAsyncComponent(() =>
  import('@/views/dialog/dialogDemo.vue')
)
const dialogDemoCustom = defineAsyncComponent(() =>
  import('@/views/dialog/dialogDemoCustom.vue')
)
import { storeToRefs } from "pinia"
import { usePiniaStore } from "@/pinia/index.ts"
const pinia = usePiniaStore()
const { userInfo } = storeToRefs(pinia)
import { homeStore } from '@/pinia/homeStore.ts';
const homePinia = homeStore();
const dicts = ref($utils.getDicts(['ACCT_OWNER']))
let FormData = reactive<{ [key: string]: any }>({});
const disabledDate = (time: Date) => {
  return time.getTime() > Date.now();
};
let dataList = reactive({
  data: [],
  total: 300,
  currentPage: 1,
})
const activeName = ref('first')
const stepActive = ref(1);
/** props数据 */
/** 定义数据 */
const params = reactive(userInfo.value)
/** 侦听 */
/** 计算 */
/** 方法 */
const clickDialog = () => {
  $DialogBox({
    title: "默认对话框操作按钮",
    compontent: dialogDemo,
    params: params,
  }).then((res: any) => {
    console.log('对话框then-', res)
  }).catch((err: any) => {
    console.log('对话框catch-', err)
  })
}
const clickDialogCustom = () => {
  $DialogBox({
    title: "自定义对话框操作按钮",
    compontent: dialogDemoCustom,
    defaultBtns: false,//自定义操作按钮时一定要定义为false
    params: params
  }).then((res: any) => {
    console.log('对话框then-', res)
  }).catch((err: any) => {
    console.log('对话框catch-', err)
  })
}
const changeFile = (res: any, type: string) => {
  FormData[type] = res.file
}
const changeImage = (res: any, type: string) => {
  FormData[type] = res.file
}
const clickMessage = () => {
  $MessageBox.enter({ txt: '是否确认提交？' }).then(() => {
    console.log('确认')
  }).catch(() => {
    console.log('取消')
  })
}
const clickMessageFail = () => {
  $MessageBox.alert({ txt: '失败提示信息', type: 'danger' }).then(() => { }).catch(() => { })
}
const clickMessageSuccess = () => {
  $MessageBox.alert({ txt: '成功提示信息' }).then(() => { }).catch(() => { })
}
const clickMessagePrompt = () => {
  $MessageBox.prompt({ txt: '我要提交数据！！' }).then(() => { }).catch(() => { })
}
const preventReclick = () => {
  console.log('点击了按钮')
};
const clickRequest = () => {
  const action = {
    userIdentity: 'MANAGER',
    userId: '016495',
    password: $utils.encryptPassworld('SC000000'),
  }
  $request
    .rpc({ name: 'pub.UserLogin', action })
    .then((result: any) => {
      $MessageBox.alert({ txt: 'requst请求成功' }).then(() => { }).catch(() => { })
    })
    .catch((error: any) => {
      $MessageBox.alert({ txt: 'requst请求失败', type: 'danger' }).then(() => { }).catch(() => { })
    })
}
const openTabPage = () => {
  homePinia.openTabPage('TAB页标题', 'ListLog', { data: '我是传递的params数据' })
}
/** 改变页条数 */
const handleSizeChange = (size: any) => {
  console.log(`改变页有${size}条`);
}
/** 前往current页 */
const handleCurrentChange = (current: any) => {
  dataList.currentPage = current;
  console.log(`前往${current}页`);
}
/** 上一页 */
const prevClick = (current: any) => {
  console.log(`上一页: 页码${current}`);
}
/** 下一页 */
const nextClick = (current: any) => {
  console.log(`下一页: 页码${current}`);
}
/** 选择标签 */
const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event)
}
/** 生命周期钩子 */
onBeforeMount(() => {
  // console.log('挂载前');
})
onMounted(() => {
  setTimeout(() => {
    dicts.value = $utils.getDicts(['ACCT_OWNER'])
  }, 1000);
  // console.log('挂载完成');
})
onBeforeUpdate(() => {
  // console.log('更新前');
})
onUpdated(() => {
  // console.log('更新完成');
})
onBeforeUnmount(() => {
  // console.log('销毁前');
})
onUnmounted(() => {
  // console.log('销毁完成');
})
onErrorCaptured(() => {
  console.log('子组件渲染发生错误时');
})
</script>

<style lang="scss" scoped></style>



